<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="zh"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="zh"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="zh"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js" lang="zh"> 
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<title>聊天室</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body	class="layui-layout-body">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-layout layui-layout-admin">
  
  <div class="layui-container">
  
  <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>移动设备、平板、桌面端的复杂组合响应式展现</legend>
    
  </fieldset> -->
  <div class="layui-row">
  
      
   <div class="layui-header">
    <div class="layui-logo"><img alt="宠联网客服在线" src="/layui/images/img/logo-index.png"	style="height: 80px;width: 200px"></div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
      <div class="grid-demo grid-demo-bg1">
      <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">用户接入</a></li>
      <li class="layui-nav-item"><a href="">客服管理</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>
      </div>
      </div>
    
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"	id="myInfo">
        <!-- <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          贤心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl> -->
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
   </div>
  
 
   
  
   
  
   

  
</div>
 

 
 
	<div id="test2"></div>
  <!-- <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      左侧导航区域（可配合layui已有的垂直导航）
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">待接入</a>
          <dl class="layui-nav-child"	id="djr">
            <dd><a href="/chat/room">用户1</a></dd>
            <dd><a href="javascript:;"	onclick="">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div> -->
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    ©2018-04-17 www.dognessnetwork.com Inc.All rights reserved 粤ICP备18041770号-1.  网站建设：广东多尼斯网络科技有限公司
  </div>
</div>
<script src="./layui/layui.js"></script>
<script src="./layui/jquery-2.1.4.js"></script>
<script src="./webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
<script src="./webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
<script>
	
	var room;
	var	sendData;
	var	seat;
	var	myInfo;
	layui.use('element', function(){
		  var element = layui.element;
		  
		});
	
	layui.use(['rate'], function(){
		  var rate = layui.rate;
		  //显示文字
		  rate.render({
		    elem: '#test2'
		    ,value: 2 //初始值
		    ,text: true //开启文本
		  });
		  });

$(function	(){
//进入当前页刷新并获取当前用户基本信息同时在后台请求坐席
$.ajax({
	type: "GET", //GET或POST,
	async:false, //默认设置为true，所有请求均为异步请求。
	url: "/js/petUser/get_login_petUser",
	dataType: "json", //xml、html、script、jsonp、text
	success: function(data) {
		//平台普通用户>>>>>PFU
		room	=	data.sign+data.username;
		myInfo	=	data;
		console.log("用户信息：>>>>");
		console.log(data);
		console.log("<<<<<<room赋值");
		console.log(room);
		var	info='<a href="javascript:;"><img src="/layui/images/img/tu3.png" class="layui-nav-img">'+data.username+'</a>'
		+'<dl class="layui-nav-child">'
  		+'<dd><a href="">基本资料</a></dd>'
  		+'<dd><a href="">安全设置</a></dd>'
		+'</dl>'
		$("#myInfo").append(info)
		
		layui.use('layim', function(layim){
			  //先来个客服模式压压精
			  layim.config({
				  brief:false,//开启简约型式
				  	init: {
				  		mine: data
				  	} //获取主面板列表信息，下文会做进一步介绍
				  	,title:data.username
				  	,min:false
			  //获取群员接口（返回的数据格式见下文）
			  ,members: {
			    url: '' //接口地址（返回的数据格式见下文）
			    ,type: 'get' //默认get，一般可不填
			    ,data: {} //额外参数
			  }
			  
			  //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
			  ,uploadImage: {
			    url: '' //接口地址
			    ,type: 'post' //默认post
			  } 
			  
			  //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
			  ,uploadFile: {
			    url: '' //接口地址
			    ,type: 'post' //默认post
			  }
			  //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
			  ,tool: [{
			    alias: 'code' //工具别名
			    ,title: '代码' //工具名称
			    ,icon: '&#xe64e;' //工具图标，参考图标文档
			  }]
			  ,brief: true
			  ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
			  ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
			  ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可

			  });
			  //打开一个客服面板
			  layim.chat({
			    name: '在线客服一' //名称
			    ,type: 'kefu' //聊天类型
			    ,avatar: '//tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
			    ,id: 1111111 //定义唯一的id方便你处理信息
			  }).chat({
			    name: '在线客服二' //名称
			    ,type: 'kefu' //聊天类型
			    ,avatar: '//tp1.sinaimg.cn/5619439268/180/40030060651/1' //头像
			    ,id: 2222222 //定义唯一的id方便你处理信息
			  });
			  layim.setChatMin(); //收缩聊天面板
			  
			  
			  //发送消息
			  layim.on('sendMessage', function(res){
				  var mine = res.mine; //包含我发送的消息及我的信息
				  var to = res.to; //对方的信息
				  console.log(res.mine);
				  sendData=res.mine
				  send()
				  
			  });
			  

			
			});
	},
	error:function(){},
}); 
/* //接收消息通道
stompClient.connect({},function(frame) {
		stompClient.subscribe('/topic/chat/response',
						function(data) {
						var json = JSON.parse(data.body);
						console.log("接收消息通道"+json)
						room=json.message;
						
		});
	}); */
	
	//var server = "http://193.112.126.100:8082/stomp"https://www.dognessnetwork.com/websocket;
	var server = "https://www.dognessnetwork.com/websocket/stomp/socketjs?id="+room;
	var socket = new SockJS(server);
	server = "https://www.dognessnetwork.com/websocket/stomp";
	var socket = new SockJS(server);
	var stompClient = Stomp.over(socket);
	
//接收消息
stompClient.connect({},function(frame) {
	  
		stompClient.subscribe('/topic/customer/' + room,
						function(data) {
						var json = JSON.parse(data.body);
						console.log("接收到的消息：")
						console.log(json)
						getMessage(json)
						if(json.msgType=='jr'){
							layui.use('layim', function(layim){
								layim.config({
									  brief:true,//开启简约型式
									  	init: { mine:myInfo}
								});
								
								layim.chat({
									  name: json.userName//名称
									  ,type: 'friend' //聊天类型
									  ,avatar: myInfo.avatar //头像
									  ,id: json.fromUser //好友id
									});
								
									/* layim.on('sendMessage', function(res){
										  var mine = res.mine; //包含我发送的消息及我的信息
										  var to = res.to; //对方的信息
										  console.log("发送");
										  console.log(res.mine);
										  console.log(petUser.id);
										  sendData=res.mine
										  //调用消息发送
										  send()
									  }); */
							});
						}
							
		});
	});
//监听socket服务器发送的消息
wesocket = new WebSocket("wss://www.dognessnetwork.com/websocket/stomp?id="+room);
wesocket.onmessage = function(msg) {
	console.log("获取到的在线客服列表");
	console.log(msg.data);
    //获取到的在线客服列表
    if(msg.data.length<0){
    	//如果客服不在线或在节假日便接入机器人客服
    	
    }else{
    	//提醒正在接入
    }
};
})
				
function	getMessage(json){
	seat	=	json.fromUser;
	//收到消息后更新消息为送达
	$.ajax({
			type: "POST", //GET或POST,
			async:false, //默认设置为true，所有请求均为异步请求。
			url: "/js/messageses/updateStatus",
			data: {
				sendTime:json.sendTime
			},
			dataType: "json", //xml、html、script、jsonp、text
			success: function(data) {
			},
			error:function(){alert('eoo')},
		});
	layui.use('layim', function(layim){
		
		layim.getMessage({
			username: json.userName//消息来源用户名
		  	,avatar: "/layui/images/img/tu2.png"//消息来源用户头像
		  	,id: json.toUser  //消息的来源ID（如果是私聊，则是用户id，如果是群聊，则是群组id）
		  	,type: "friend" //聊天窗口来源类型，从发送消息传递的to里面获取
		  	,content: json.content //消息内容
		  	,cid: 0 //消息id，可不传。除非你要对消息进行一些操作（如撤回）
		  	,mine: false //是否我发送的消息，如果为true，则会显示在右方
		  	,fromid: json.fromUser//消息的发送者id（比如群组中的某个消息发送者），可用于自动解决浏览器多窗口时的一些问题
		  	,timestamp: json.sendTime //服务端时间戳毫秒数。注意：如果你返回的是标准的 unix 时间戳，记得要 *1000
	});
		});
}
function	send(){
	console.log("发送数据：")
	console.log(sendData)
	 $.ajax({
			type: "POST", //GET或POST,
			async:false, //默认设置为true，所有请求均为异步请求。
			url: "/js/messageses/sendMsg",
			data: {
				formUser: room, 
				toUser : seat,
				postMessages : sendData.content
			},
			dataType: "json", //xml、html、script、jsonp、text
			success: function(data) {
			},
			error:function(){alert('eoo')},
		});
}
</script>
</body>
</html>